<!doctype html>
<html class="no-js" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

    <head th:fragment="head">
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="viewport"  content="width=device-width, initial-scale=1" />
        <meta name="renderer" content="webkit" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="apple-mobile-web-app-title" content="Platform" />
        <meta name="msapplication-TileImage" th:content="@{/assets/favico.ico}" />
        <meta name="msapplication-TileColor" content="#0e90d2" />

<!--        <meta name="_csrf" th:attr="content=${_csrf.token}"/>-->
<!--        <meta name="_csrf_header" th:attr="content=${_csrf.headerName}"/>-->

        <title>Platform</title>

        <script type="text/javascript" th:src="@{/jquery/jquery.min.js}"></script>

        <link rel="stylesheet" type="text/css" media="screen" th:href="@{/amazeui/assets/css/amazeui.min.css}" />
        <link rel="stylesheet" type="text/css" media="screen" th:href="@{/amazeui/assets/css/admin.css}" />
        <script type="text/javascript" th:src="@{/amazeui/assets/js/amazeui.min.js}"></script>

        <script type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

        <script type="text/javascript" th:src="@{/assets/js/Math.uuid.js}"></script>
        <script type="text/javascript" th:src="@{/assets/js/tool.js}"></script>
        <script type="text/javascript" th:src="@{/assets/js/commons.js}"></script>
        <!--        <script type="text/javascript" th:src="@{'/assets/js'+${path}+'.js'}"></script>-->
        <style>
            .header {
              text-align: center;
            }
            .header h1 {
              font-size: 200%;
              color: #333;
              margin-top: 30px;
            }
            .header p {
              font-size: 14px;
            }
        </style>
        <script>
            $(function(){
                $("#send").click(function (){
                    var url = "/verification/code/send.do?to="+$("#to").val()+"&imageCode="+$("#imagecode").val();
                    $.get(url,function(result){
                        alert("send success")
                    });
                });
                $("#imgCode").click(getImageCode);
                getImageCode();
            })
            function getImageCode(){
                $.get("/verification/code/image.do",function(result){
                    $("#imgCode").attr("src","data:image/png;base64,"+result);
                });
            }
        </script>
    </head>
    <body>

        <div class="header">
            <div class="am-g">
                <h1>Platform SSO</h1>
                <p>Integrated Development Environment<br/>代码编辑，代码生成，界面设计，调试，编译</p>
                <h2 style="color: red" th:text="${param.message}"></h2>
            </div>
            <hr />
        </div>
        <div class="am-g">
            <div class="am-u-lg-3 am-u-md-2">
                &nbsp;
            </div>
            <div class="am-u-lg-6 am-u-md-8">
                <div class="am-btn-group">
                    <a th:href="@{/endpoint/oauth2/wechat_open/auth.do}" class="am-btn am-btn-secondary am-btn-sm"><i class="am-icon-weixin am-icon-sm"></i> Wechat</a>
                </div>
                <br>
                <br>
                <div class="am-tabs am-margin" data-am-tabs="">
                    <ul class="am-tabs-nav am-nav am-nav-tabs">
                        <li class="am-active"><a href="#tab1">账号密码</a></li>
                        <li class=""><a href="#tab2">手机登录</a></li>
                        <li><a href="#tab3">微信扫码</a></li>
                    </ul>
                    <div class="am-tabs-bd" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                        <div class="am-tab-panel am-fade am-active am-in" id="tab1">
                            <form method="post" class="am-form" action="/login.do">
                                <label for="username">账号:</label>
                                <input type="text" name="username" id="username" value="">
                                <br>
                                <label for="password">密码:</label>
                                <input type="password" name="password" id="password" value="">
<!--                                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">-->
                                <br>
                                <label for="remember-me">
                                    <input id="remember-me" name="remember-me" type="checkbox">
                                    记住密码
                                </label>
                                <br />
                                <div class="am-cf">
                                    <input type="submit" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm am-fl">
                                    <input type="submit" name="" value="忘记密码 ^_^? " class="am-btn am-btn-default am-btn-sm am-fr">
                                </div>
                            </form>
                        </div>
                        <div class="am-tab-panel am-fade am-in" id="tab2">
                            <form method="post" class="am-form" action="/endpoint/login.do">
                                <div class="am-g">
                                    <div class="am-u-lg-12">
                                        <label for="to">手机号:</label>
                                        <input type="text" name="to" id="to" value="">
                                    </div>
                                    <div class="am-u-lg-12">
                                        &nbsp;
                                    </div>
                                    <div class="am-u-lg-8">
                                        <label for="imagecode">图片验证码:</label>
                                        <input type="text" name="imagecode" align="点击刷新" alt="点击刷新" title="点击刷新" id="imagecode" value="">
                                    </div>
                                    <div class="am-u-lg-4">
                                        <img id="imgCode">
                                    </div>
                                    <div class="am-u-lg-12">
                                        &nbsp;
                                    </div>
                                    <div class="am-u-lg-8">
                                        <label for="code">短信验证码:</label>
                                        <input type="text" name="code" id="code" value="">
                                    </div>
                                    <div class="am-u-lg-4" >
                                        <input type="button" style="margin-top: 30px" id="send" class="am-btn am-btn-primary am-btn-sm am-fl" value="发送"/>
                                    </div>
                                    <div class="am-u-lg-12">
                                        &nbsp;
                                    </div>
                                    <div class="am-u-lg-3">
                                        &nbsp;
                                    </div>
                                    <div class="am-u-lg-6">
                                        <input type="submit" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm am-fl">
                                    </div>
                                    <div class="am-u-lg-3">
                                        &nbsp;
                                    </div>
                                </div>
<!--                                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" >-->
                                <br>
                                <div class="am-cf">
                                </div>
                            </form>
                        </div>
                        <div class="am-tab-panel am-fade am-in" id="tab3" style="text-align:center">
                            <iframe th:src="@{/endpoint/oauth2/wechat_open/auth.do}" width="300px" height="400px"></iframe>
                        </div>
                    </div>

                </div>
                <hr>
                <p class="am-padding-left">© 2019 - 2020 冯智豪. All Rights Reserved 豫ICP备17042607号-2</p>
            </div>
            <div class="am-u-lg-3 am-u-md-2">
                &nbsp;
            </div>
        </div>
    </body>
</html>